<meta title="淘宝物料配置" args="taobaoMaterialCat" width="600px"/>
<style>

</style>
<div class="p">
    <form class="form-horizontal" id="form" s="form,valid" method="post" action="/api/taobao-material-cat/material/{taobaoMaterialCat.id}">
        <table class="table table-bordered table-condensed table-striped">
            <thead>
            <tr>
                <th>名称</th>
                <th>ID</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody s="nda,loop" id="mappingList" s-data="taobaoMaterialCat.materialList">
            <tr s-loop-role="empty">
                <td colspan="3" class="alert alert-warning">暂无数据</td>
            </tr>
            <tr s="row,datac" s-loop-role="row">
                <td>
                    <input autocomplete="off" placeholder="物料名称" type="text" s-valid-error="require()" s-data-filter="'name'" class="form-control name input-sm" name="nameList" />
                </td>
                <td>
                    <input autocomplete="off" placeholder="物料id" type="text" s-valid-error="require()" s-data-filter="'materialId'" class="form-control id input-sm" name="materialIdList" />
                </td>
                <td>
                    <input autocomplete="off" type="button" s-click="del(this)" class="btn btn-sm btn-default" value="删除" />
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr class="form-inline">
                <td colspan="5">
                    <input autocomplete="off" type="button" class="btn btn-sm btn-default" s-click="addNew()" value="新增" />
                </td>
            </tr>
            </tfoot>
        </table>
    </form>
    <textarea placeholder="自动识别" id="detectTextarea" class="form-control m-t-xs" rows="3"></textarea>
</div>
<script type="text/javascript">
    S.meta.btns = [
      {
        name: "确定",
        style: "btn btn-primary",
        click: function() {
          return $form.submit().done(function() {
            S.close(true)
          })
        }
      },
      {
        name: "自动识别",
        style: "btn btn-warning btn-outline",
        click: function() {
            autoDetect();
        }
      },
      {
        name: "清空",
        style: "btn btn-danger btn-outline",
        click: function() {
          $mappingList.data([])
        }
      },
      {
        name: "关闭",
        style: "btn btn-default",
        click: function() {
          S.close();
        }
      }
    ]
    function autoDetect() {
      var val = $detectTextarea.node.val()
      $.each(val.split('\n'), function() {
        var rowVals = this.trim().split(/\s/)
        $mappingList.addRow( {name: rowVals[0].trim(), materialId: rowVals[1].trim()}, 'append')
      })
    }
    function addNew() {
        $mappingList.addRow( {}, 'append')

    }
    function del($s) {
        $s.parent().node.remove();
    }
</script>